<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  <h2>用户登录</h2>
  <div>
    用户名：<input type="text" id="username"> <br>
    密码：<input type="password" id="password"> <br>
    验证码：<input type="text" id="code">
        <img src="" id="img"> 
        <input type="hidden" id="uuid"> <br>
    <input type="button" value="登录" onclick="doLogin()">
  </div>

  <script>
    $(function(){
        loadCaptcha()
    })

    // 加载验证码
    function loadCaptcha(){
        $.ajax({
            url:'http://localhost:8080/captchaImage',
            dataType:'json',
            success:function(res){
                $('#img').attr('src', res.data.img)
                $('#uuid').val(res.data.uuid)
            }
        })
    }

    // 登录
    function doLogin(){
      var loginInfo = {
        username: $("#username").val(),
        password: $("#password").val(),
        code: $("#code").val(),
        uuid: $("#uuid").val()
      }

      $.ajax({
        url: "http://localhost:8080/login",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(loginInfo),
        dataType:'json',
        success: function (res) {
          if (res.status == 200) {
            // 保存用户信息
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            location.href = 'main.html'
          } else {
            alert(res.msg);
            loadCaptcha()
          }
        }
      })
    }
  </script>
</body>
</html>